<template>
  <div class="event-editor">
    <el-form label-position="top">
      <template v-for="(event, key) in events" :key="key">
        <el-form-item :label="event.label">
          <el-select
            v-model="eventValue[key]"
            placeholder="请选择事件处理方式"
            @change="updateEvent(key, $event)">
            <el-option
              v-for="action in event.actions"
              :key="action.value"
              :label="action.label"
              :value="action.value" />
          </el-select>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  value: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update'])

// 事件配置
const events = {
  click: {
    label: '点击事件',
    actions: [
      { label: '无', value: '' },
      { label: '打开链接', value: 'openLink' },
      { label: '提交表单', value: 'submitForm' },
      { label: '显示弹窗', value: 'showDialog' }
    ]
  },
  change: {
    label: '值变化事件',
    actions: [
      { label: '无', value: '' },
      { label: '刷新数据', value: 'refreshData' },
      { label: '联动组件', value: 'linkComponent' },
      { label: '执行校验', value: 'validate' }
    ]
  }
}

// 本地事件值
const eventValue = ref({ ...props.value })

// 监听外部值变化
watch(() => props.value, (newVal) => {
  eventValue.value = { ...newVal }
}, { deep: true })

// 更新事件
const updateEvent = (key, value) => {
  eventValue.value[key] = value
  emit('update', { ...eventValue.value })
}
</script>

<style scoped>
.event-editor {
  padding: 16px;
}
</style> 